<script src="/espirit/scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/espirit/scripts/jquery-ui-1.8.18.custom.js" type="text/javascript"></script>

<style>
	.stdEle {
		border: 1px solid red;
    	width: 200px;
    	float: left;
	}
	.ctn1 {
		float: left;
		width: 250px;
		height: 500px;
		border: 1px solid green;
	}
	
	.ctn2 {
		float: left;
		width: 500px;
		height: 200px;
		border: 1px solid blue;
	}
</style>

<div id="pageCtn">
	<div class="ctn1 connectedSortable">
		<div class="stdEle"> A </div>
		<div class="stdEle"> B </div>
		
	</div>
	<div class="ctn2 connectedSortable">
		<div class="stdEle"> C </div>
		<div class="stdEle"> D </div>
	</div>
</div>

<script>
$('#pageCtn').sortable({
	
});
$('.ctn1').sortable({
		
		connectWith: ".connectedSortable",
		stop: function(event, ui) {
			//updatePageElement(ui.item);
		}
	});
$('.ctn2').sortable({
	
	connectWith: ".connectedSortable",
	stop: function(event, ui) {
		//updatePageElement(ui.item);
	}
});
</script>